<template>
    <van-tabbar v-model="active" route>
        <van-tabbar-item v-for="(item, index) in tabItems" :key="index" :to="item.path" :icon="item.icon">
            {{ item.text }}
        </van-tabbar-item>
    </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const tabItems = [
    {
        text: '首页',
        icon: 'home-o',
        path: '/home'
    },
    {
        text: '医院',
        icon: 'hotel-o',
        path: '/hospitals'
    },
    {
        text: '预约',
        icon: 'calendar-o',
        path: '/appointments'
    },
    {
        text: '我的',
        icon: 'user-o',
        path: '/profile'
    }
]

// 根据当前路由设置激活的标签
const active = ref(tabItems.findIndex(item => item.path === route.path))
</script>

<style scoped lang="scss">
:deep(.van-tabbar-item--active) {
    color: var(--primary-color);
}
</style>